const code = document.querySelector('.code')
let timerId
let flag = true
code.addEventListener('click', function () {
    if (flag) {
        let time = 10
        code.innerHTML = `请等待${time}s`
        clearInterval(timerId)
        flag = false
        timerId = setInterval(function () {
            time--
            code.innerHTML = `请等待${time}s`
            if (time <= 0) {
                code.innerHTML = '重新发送'
                clearInterval(timerId)
                flag = true
            }
        }, 1000)
    }
})

// 2. 验证用户名, 用户名的正则表达式 /^[a-zA-Z0-9-_]{6,10}$/
let reg = /^[a-zA-Z0-9-_]{6,10}$/
const username = document.querySelector('[name="username"]')
const spans = document.querySelectorAll('.msg')
function verifyUsername() {
    if (reg.test(username.value)) {
        spans[0].innerHTML = ''
        return true
    } else {
        spans[0].innerHTML = '用户名不符合要求'
        return false
    }
}
username.addEventListener('blur', verifyUsername)

// 3. 验证手机号, 手机号的正则表达式 /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/

let reg1 = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/
const phone = document.querySelector('[name="phone"]')
function verifyPhone() {
    if (reg1.test(phone.value)) {
        spans[1].innerHTML = ''
        return true
    } else {
        spans[1].innerHTML = '手机号不符合要求'
        return false
    }
}
phone.addEventListener('blur', verifyPhone)
// 4. 验证的是验证码, 验证码的正则表达式 /^\d{6}$/
let reg2 = /^\d{6}$/
const code1 = document.querySelector('[name="code"]')
function verifycode() {
    if (reg2.test(code1.value)) {
        spans[2].innerHTML = ''
        return true
    } else {
        spans[2].innerHTML = '验证码不符合要求'
        return false
    }
}
code1.addEventListener('blur', verifycode)
// 5. 验证的是密码框, 密码框的正则表达式 /^[a-zA-Z0-9-_]{6,20}$/
let reg3 = /^[a-zA-Z0-9-_]{6,20}$/
const pwd = document.querySelector('[name="password"]')
function verifypwd() {
    if (reg3.test(pwd.value)) {
        spans[3].innerHTML = ''
        return true
    } else {
        spans[3].innerHTML = '密码不符合要求'
        return false
    }
}
pwd.addEventListener('blur', verifypwd)
// 6. 确认密码的验证
const confirm = document.querySelector('[name="confirm"]')
function verifyconfirm() {
    if (pwd.value === confirm.value) {
        spans[4].innerHTML = ''
        return true
    } else {
        spans[4].innerHTML = '两次密码不一致'
        return false
    }
}
confirm.addEventListener('blur', verifyconfirm)
// 7. 点击 我同意 按钮, 让i标签添加或者移除 icon-queren2 这个类
const agree1 = document.querySelector('.pl50 .agree1')



// 8. 提交的整体验证
const form = document.querySelector('form')
form.addEventListener('submit', function (e) {
    e.preventDefault()
    if (!verifyUsername()) {
        return
    }
    else if (!verifyPhone()) {
        return
    }
    else if (!verifycode()) {
        return
    }
    else if (!verifypwd()) {
        return
    }
    else if (!verifyconfirm()) {
        return
    } else if (!agree1.checked) {
        return
    }
    else {
        alert('注册成功！')

    }
})
const button = document.querySelector('.submit')
const usernameb = document.querySelector('.usernameb')
const passwordb = document.querySelector('.passwordb')
const phoneb = document.querySelector('.phoneb')
button.addEventListener('click', function () {
    if (agree1.checked) {
        localStorage.setItem('username', usernameb.value)
        localStorage.setItem('phone', phoneb.value)
        localStorage.setItem('passwordb', passwordb.value)
        location.href = './login.html'
    }else if(!agree1.checked) {
        alert('请勾选同意协议！')
        return false
    }
})